<template>
	<view class="person">
			<view class='fangshi' >
			   下方耕种宝登录
			</view>
			<view class='denglufangshi'>
			----  选择登录方式  -----
			</view>
			<view class='weixinLoginCss' @click="weixinLogin">
			  微信授权登录
			</view>
			<view class='shoujiLoginCss'>
			  手机验证登录
			</view>
	    <!-- <view v-if="!isLogin" class="index-bottom">
				<text>登录进入快乐耕种时间</text>
				<view class="">
					<u-button v-if="showLogin" @click="wdgetUserInfo" class="bottom-btn" size="medium" shape="circle"
						type="success">登录</u-button>
					<u-button v-else @getphonenumber="getPhoneNumber" open-type="getPhoneNumber" class="bottom-btn"
						size="medium" shape="circle" type="success">授权</u-button>
				</view>
		</view> -->
		<view v-if="my" class='tip' @click="gotoPersonCenter">
			<view class=''>
			  已经登录 !
			</view>
			<view class='tomy'>
			  点击确认
			</view>
		</view>
	</view>
</template>
<script>
	import * as that from '../../API/index.js'
	import store from '@/store'
	export default {
		data() {
			return {
				title: 'Hello',
				userMessage:'',
				type:'',
				isLogin:false,
				showLogin: false,
				my:false,

			}
		},
		computed:{
			typeName(){
				if(this.type == 'Student'){
					return '学生'
				}else if(this.type == 'Teacher'){
					return '教师'
				}else if(this.type == 'Expert'){
					return '专家'
				}
			}
			
		},
		onShow() {
			// this.isLogin  = store.getters.getLogin
			// if(!this.userMessage){
			// 	this.getUserInfo()
			// }
		},
		methods:{
		  login() {
					that.login({
						code: uni.getStorageSync("jsCode")
					}).then(res => {
						console.log(res)
						uni.setStorageSync('openid', res.openid);
						uni.setStorageSync('unionid', res.unionid);
						uni.setStorageSync('session_key', res.sessionKey);
						uni.setStorageSync("userInfo", res.data)
						uni.setStorageSync("phone", res.data.account)
						uni.setStorageSync("token", res.token)
						this.getExperiments()
						this.$store.commit('SET_ISLOGIN', true)
					}).catch(err => {

						console.log('err  ----',err)


						if (err.code === 420) {
							this.showLogin = true
							uni.setStorageSync('openid', err.openid);
							uni.setStorageSync('unionid', err.unionid);
							uni.setStorageSync('session_key', err.sessionKey);
							// console.log(this.showLogin)
							// this.haveBind = false
							// this.login()
						}
					})
				},
		   wdgetUserInfo() {
					uni.getUserProfile({
						lang: 'en',
						desc: '登录',
						success: res => {
							console.log(res);
							uni.setStorageSync('userIv', res.iv);
							uni.setStorageSync('userEncryptedData', res.encryptedData);
							uni.setStorageSync('userInfo', res.userInfo);
							// if(!this.haveBind){
							this.showLogin = false
							// }else{ 
								// this.login() 
							// }
						}
					})
			},
	    	getPhoneNumber(e) {
					console.log(e)
					var data = {
						openid: wx.getStorageSync('openid'),
						unionid: wx.getStorageSync('unionid'),
						sessionKey: wx.getStorageSync('session_key'),
						user_iv: wx.getStorageSync('userIv'),
						user_encryptedData: wx.getStorageSync('userEncryptedData'),
						phone_iv: e.detail.iv,
						phone_encryptedData: e.detail.encryptedData
					}			
					that.phoneBind(data).then(res => {
						console.log(res)
						uni.setStorageSync("userInfo", res.data)
						uni.setStorageSync("token", res.token)
						uni.setStorageSync("phone", res.data.account)
						this.getExperiments()
						this.$store.commit('SET_ISLOGIN', true)
						// this.login()
					})
				},
			getExperiments() {
					that.experimentsList().then(res => {
						console.log(res)
						this.dataList = res.data
						// this.dataList = [...res.data,...res.data,...res.data]
					})
				},
			getUserInfo(){
				let userInfo = uni.getStorageSync("userInfo")
				this.type = userInfo.type
				that.getUserMessage(userInfo.type).then(res =>{
					this.userMessage = res.data
				})
			},
			askQuestion(){
				uni.navigateTo({
					url:'../submit-question/submit-question'
				})
			},
			seeMyQuestion(){
				uni.navigateTo({
					url:'../my-question/my-question'
				})
			},
			outLogin(){
				this.$store.commit('SET_ISLOGIN', false)
				this.isLogin  = false
				this.userMessage = null
				uni.setStorageSync("userInfo", null)
				uni.setStorageSync("token", null)
				uni.navigateTo({
					url:"../goLogin/goLogin"
				})
			},
		   	weixinLogin(){
		    		uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res)
						wx.setStorageSync('jsCode', res.code);
						console.log(res);
						console.log('isLogin---------------执行');
						this.login()
						this.my = true
					}, 
					fail: (res) => {
						console.log(res);
					}
				});

			  },
			gotoPersonCenter(){
				 wx.switchTab({
						url:'../person-center/person-center'
					})
				// uni.navigateTo({
				// 	url:'../person-center/person-center'
				// })
			  console.log('44444');
			}
		},

	}
	
</script>
<style lang="scss">
	page{
		background-color: #FCFAF2;
		height: 100%;
	}
	.person{
		height: 100%;
		display: flex;
		flex-direction: column;
		.person-header{
			@include flex(flex-start);
			padding: 40rpx 60rpx;
			background-color: #FFFFFF;
			.header-left{
				width: 200rpx;
				height: 200rpx;
				margin-right: $uni-spacing-20;
			}
			.header-right{
				.right-top{
					font-size: $uni-font-size-24;
					margin-bottom: $uni-spacing-10;
					
					.right-img{
						width: 60rpx;
						height: 60rpx;
						vertical-align: middle;
						margin-left: $uni-spacing-10;
					}
				}
			}
		}
		.person-content{
			padding: $uni-spacing-20 $uni-spacing-30;
			background-color: #FFFFFF;
			margin-top: $uni-spacing-30;
			flex: 1;
			height: 0;
			.content-title{
				color: #000000;
				font-size: $uni-font-size-20;
				margin-bottom: $uni-spacing-20;
			}
			.content-item{
				padding: $uni-spacing-15 $uni-spacing-10;
				margin: $uni-spacing-10 0;
				font-size: $uni-font-size-16;
				background-color: #e7e3e3b5;
				border-radius: 10rpx;
			}
		}
		.person-bottom{
			width: 80%;
			margin: 0 auto;
			margin-bottom: 40rpx;
			@include  flex(space-around);
		}

		.outLogin{
			position: relative;
			.outLogin-btn{
				position: absolute;
				right: 20px;
				border-radius: 10px;
				background-color: #d98072;
				padding: 5px 20px;
			}
		}
		.fangshi{
			margin:60px auto;
			background-color: #676768;
			width: 100%;
			// border-radius: 30px;
			// padding: 10px 30px;
			text-align: center;
			line-height: 50px;
			height: 50px;
			color: #fff;

		}
		.denglufangshi{
			width: 100%;
			text-align: center;
		}
		.weixinLoginCss{
			margin: 80px  auto 0;
			width: 300px;
			border-radius: 30px;
			padding: 10px 30px;
			background-color: #5cc970;
			color: #fff;
			text-align: center;

		}
		.shoujiLoginCss{
			margin: 30px  auto 0;
			width: 300px;
			border-radius: 30px;
			padding: 10px 30px;
			background-color: #eee;
			color: #bbb; 
			text-align: center;
		}
		
			.index-bottom {
				position: absolute;
				bottom: 20rpx;
				@include flex(space-between);
				width: 80%;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 50rpx;
				padding: 16rpx 40rpx;
				padding-right: 0;
				color: #FFFFFF;
				background-color: #676768;

				.bottom-btn {
					letter-spacing: 2px;
					margin-right: 40rpx;
				}
			}

	}
	.tip{
		width: 200px;
		height: 100px;
		background-color: #676768;
		color: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		padding-top:30px;
		// border: 1px solid #fff;
		border-radius: 10px;
		.tomy{
			margin-top: 20px;
			// background-color: #fff;
		}
	}
</style>
